<template>
	<span class="actions-container">
		<span v-show="!editing" class="actions-group">
			<!-- <span class="circle"></span> -->
			<i class="empty heart icon"
			@click.stop="$emit('clickHeart')"></i>
			<span class="ui left pointing mini label actions"
			:style="{width: width}">
			    <i class="plus icon"
			    v-if="config.indexOf('add1') !== -1"
			    @click.stop="$emit('add1')"></i>
			    <i class="plus square outline icon"
			    v-if="config.indexOf('add2') !== -1"
			    @click.stop="$emit('add2')"></i>
			    <i class="edit icon"
			    v-if="config.indexOf('edit') !== -1"
			    @click.stop="$emit('edit')"></i>
			    <i class="remove icon"
			     v-if="config.indexOf('remove') !== -1"
			    @click.stop="$emit('remove')"></i>
			</span>
		</span>
		<!-- 修改完成图标 -->
		<i class="icon checkmark"
		v-show="editing"
		@click.stop="$emit('editDone')"></i>
	</span>
</template>
<script>
export default{
	name: 'actions',
	mounted(){
	},
	props: ['editing', 'config', 'width']
}
</script>
<style lang='less' scoped>
/*包裹柱操作i的*/
.actions-group{
	position: relative;
	.actions.ui.label.pointing{
		position: absolute !important;
		z-index: 5;
		top: -.4em;
		left: 1.4em;
		width: 7.4em;
		padding: .4em .5em !important;
		opacity: 0;
		transition: all .5s;
		i:hover{
			transform: rotate(30deg);
			transition: all .3s;
		}
	}
	.circle{
		width: 8px;
	    height: 8px;
	    border: 1px solid #333;
	    display: inline-block;
	    border-radius: 100%;
	    transition: all .5s;
	    background: #e8e8e8;
	}
	.heart.icon{
		font-size: .5em;
	}
	.icon{
		margin: 0 .4em 0 0 !important;
	}
	&:hover{
		.actions.ui.label{
			opacity: 1;
		}
		.circle{
			background: #666;
		}
		i.icon.heart:before {
		    content: "\f004";
		}
	}
}
</style>
<style lang='less'>
	.actions-container{
		opacity: 0;
		font-size: 8px;
	}
	#navi_container input:hover + .actions-container{
		display: inline-block;
		opacity: 1;
	}
	.actions-container:hover{
		opacity: 1;
	}
</style>